<template>
    <div class="data-content">
        <div 
        v-if="jtRenYuanType == '0' || jtRenYuanType == '2'" 
        style="font-size: 16px; padding-left: 20px"
        >
            <div v-if="jtRenYuanList.rows.length > 0">
                <div style="font-size: 15px;">
                    共查询到 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.countSize }}</span> 条数据，
                    当前第 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.curpage ? jtRenYuanList.pageObj.curpage:'1' }}</span> 页，
                    共计 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.maxPage }}</span> 页
                    <el-button type="text" @click.stop="renyuanPreviousPage(jtRenYuanList.pageObj.curpage)"> 上一页</el-button>
                    <el-button type="text" @click.stop="renyuanNextPage(jtRenYuanList.pageObj.curpage)"> 下一页</el-button>
                </div>

                <table class="layui-table">
                    <colgroup>
                        <col width="60">
                        <col width="200">
                        <col width="120">
                        <col>
                        <col width="160">
                        <col width="160">
                        <col width="160">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>毕业学校</th>
                        <th>学历</th>
                        <th>专业</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in jtRenYuanList.rows" :key="index">
                        <td>{{ (jtRenYuanList.pageObj.curpage - 1) * 10 + index + 1 }}</td>
                        <td>
                            <div style="color: #1989fa; padding-top: 10px">
                                <span style="color: #1989fa" @click.stop="getJTRenYuanXQ(item.id, jtRenYuanType )">
                                    {{ item.name }}
                                </span>
                            </div>
                        </td>
                        <td>{{ item.sex }}</td>
                        <td>{{ item.topCollege }}</td>
                        <td>{{ item.topEducation }}</td>
                        <td>{{ item.topMajor }}</td>
                        <td>
                            <el-button type="text" @click.stop="getJTRenYuanXQ(item.id, jtRenYuanType )"> 详情</el-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-else style="font-size: 16px;">
                未查询到数据
            </div>
        </div>

        <div v-if="corpType == '监理'">
            <el-tabs v-model="renYuanJLActiveName" type="card" @tab-click="renyuanJLTab">
                <el-tab-pane label="行政管理人员" name="4">
                    <div v-if="jtRenYuanList.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.curpage ? jtRenYuanList.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanPreviousPage(jtRenYuanList.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanNextPage(jtRenYuanList.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="200">
                                <col width="120">
                                <col>
                                <col width="160">
                                <col width="160">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>出生年份</th>
                                <th>工作年限</th>
                                <th>行政管理人员类别</th>
                                <th>职称</th>
                                <th>职务</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanList.rows" :key="index">
                                <td>{{ (jtRenYuanList.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.sex }}</td>
                                <td>{{ item.birthDate }}</td>
                                <td>{{ item.companyYear }}</td>
                                <td>{{ item.dutyType }}</td>
                                <td>{{ item.professionalTitle }}</td>
                                <td>{{ item.position }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
                
                <el-tab-pane label="监理工程师" name="1">
                    <div v-if="jtRenYuanList.rows.length > 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.curpage ? jtRenYuanList.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtRenYuanList.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="renyuanPreviousPage(jtRenYuanList.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="renyuanNextPage(jtRenYuanList.pageObj.curpage)"> 下一页</el-button>
                        </div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col width="200">
                                <col width="120">
                                <col>
                                <col width="160">
                                <col width="160">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>出生年份</th>
                                <th>证书编号</th>
                                <th>证书专业</th>
                                <th>合同开始日期</th>
                                <th>合同截止日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in jtRenYuanList.rows" :key="index">
                                <td>{{ (jtRenYuanList.pageObj.curpage - 1) * 20 + index + 1 }}</td>
                                <td>
                                    <span style="color: #1989fa" @click.stop="getJTRenYuanXQ(item.id, jtRenYuanType)">
                                        {{ item.name }}
                                    </span>
                                </td>
                                <td>{{ item.sex }}</td>
                                <td>{{ item.birthDate }}</td>
                                <td>{{ item.certificateNumber }}</td>
                                <td>{{ item.professionalCertificate }}</td>
                                <td>{{ item.workStartDate }}</td>
                                <td>{{ item.workEndDate }}</td>
                                <td>
                                    <el-button type="text" @click.stop="getJTRenYuanXQ(item.id, jtRenYuanType )"> 详情</el-button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else style="font-size: 16px;">
                        未查询到数据
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <el-link v-if="jtRenYuanList.rows.length > 0" type="info" :underline="false">*此数据来全国公路建设市场信用信息管理系统官方网站</el-link>

        <!-- 交通，人员详情 弹窗 -->
        <el-dialog title="人员详情" :visible.sync="dialogjtRenYuanVisible">
            <renyuan-info :jt-ren-yuan-type="jtRenYuanType" :person-id="personId" :person-type="personType" :corp-type="corpType"></renyuan-info>
        </el-dialog>
    </div>
</template>

<script>
import renyuanInfo from './renyuaninfo'
export default {
    props: {
        jiaotongComId: {
            type: String,
            default: "",
        },
        corpType: {
            type: String,
            default: "",
        },
    },
    components:{
        renyuanInfo
    },
    data: () => ({
        dialogjtRenYuanVisible: false,//人员弹窗
        jtRenYuanList: { rows: [] },
        jtRenYuanType: "0",
        jtRenYuanInfoTabName: "",
        renyuanPageNo: 1,
        renyuanPageSize: 10,
        // 监理人员列表tab
        renYuanJLActiveName: '4',
        personId :'',
        personType :'',
    }),
    watch:{
        jiaotongComId:{
            handler(n,o){
                // this.getJTRenYuanList();
                this.getcorpType();
            },
            deep:true,
        },
        corpType:{
            handler(n,o){
                this.getcorpType();
            },
            deep:true,
            immediate: true,
        },
    },
    methods: {
        // 获取 交通 企业人员 列表
        getJTRenYuanList: function () {
            var that = this;
            if(!that.jiaotongComId){return}
            this.$ajax({
                type: "get",
                url: `${that.$store.state.api.searchUrl}/searchjiaotong/jiaotong/renyuan`,
                data: {
                    comId: that.jiaotongComId,
                    type: that.jtRenYuanType,
                    pageNo: that.renyuanPageNo,
                    pageSize: that.renyuanPageSize
                },
                callback: function (data, res) {
                    that.jtRenYuanList = data;
                },
            });
        },
        //列表 下一页
        renyuanNextPage: function(pageNo){
            if(this.jtRenYuanList.pageObj.maxPage > pageNo){
                this.renyuanPageNo = pageNo + 1;
                this.getJTRenYuanList();
            }
        },
        //列表 上一页
        renyuanPreviousPage: function(pageNo){
            if(pageNo > 1){
                this.renyuanPageNo = pageNo - 1;
            }else {
                this.renyuanPageNo = 1;
            }
            this.getJTRenYuanList();
        },
        // 监理人员列表标签页切换
        renyuanJLTab(tab, event) {
            this.changeJTRenYuanType(tab.name, 1);
        },

        //获取 交通 人员详情
        getJTRenYuanXQ: function (personId, type) {
            this.personId = personId;
            this.personType = type;
            this.dialogjtRenYuanVisible = true;
        },
        //交通，监理人员切换
        changeJTRenYuanType(type, pageNo) {
            this.jtRenYuanType = type;
            this.getJTRenYuanList(type);
        },

        getcorpType(){
            var type = "";
            if (this.corpType == "施工") {
                type = "0";
            } else if (this.corpType == "勘察设计") {
                type = "2";
            } else if (this.corpType == "监理") {
                type = "4";
            }
            this.jtRenYuanType = type;
            this.getJTRenYuanList();
        },
    },
    mounted() {
        this.getcorpType();
        // this.getJTRenYuanList(1);
    },
};
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
                font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
            background: #348bda;
            text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
